
<template>
<!-- 新闻主页 -->
    <div class="newslist">
        <!-- 轮播图开始   v-if="id==1" 控制轮播图出现在id=1的页面-->
        <div class="my-swpier" v-if="id==1">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in swiperImage" :key="index">
                    <img width="100%" v-lazy="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 轮播图结束 -->

        <!-- 新闻列表开始 -->
        <div class="nihao">
            <!--vant row格栅系统 -->
        <van-row 
            class="my-row" 
            type="flex" 
            justify="space-between"
            v-for="item in newsList "
            :key="item.newsId"
            @click="goToNewsDetails(item.newsId)"
        >
                <van-col span="6">
                    <van-image
                        width="100%"
                        height="100%"
                        lazy-load
                        :src='item.pic'
                        />
                </van-col>
                <van-col span="17" class="info-right">
                    <h3>{{item.title}}</h3>
                    <div class="info">
                        <span>{{item.time}}</span>
                        <span>{{item.src}}</span>
                    </div>
                </van-col>
            </van-row>
            </div>
        <!-- 新闻列表结束 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            newsList:[],
            id: this.$route.params.id,
            swiperImage: [
                "https://n.sinaimg.cn/baby/transform/500/w300h200/20200511/cba8-itmiwry8212454.jpg",
                "https://p.ivideo.sina.com.cn/video/335/495/776/335495776.jpg",
                "https://n.sinaimg.cn/default/feedbackpics/transform/116/w550h366/20180517/2uns-harvfhu4568971.png",
                "https://n.sinaimg.cn/baby/transform/500/w300h200/20200511/4378-itmiwry8730963.jpg",
            ],
        }
    },
    // 精准监听
    watch: {
        $route: {
            handler() {
                this.id = this.$route.params.id
                this.getNewsList()
            },
            immediate: true,
            deep: true
        }
    },
   methods: {
        getNewsList() {
            this.$http('/getNewsList', 'get', {
                id: this.id
            }).then(res => {
                console.log(res)
                this.newsList=res.list
            }).catch(err => {
                console.log(err)
                return err
            })
        },
        goToNewsDetails(id){
            this.$router.push({path:'/newsdetails/'+id})
        }
   },
   mounted() {
       this.getNewsList()
   },
}
</script>
<style lang='scss' scoped>
.newslist{
    margin-top: 84px;
    // 轮播图开始
    .my-swpier{
        width: 100%;
        height: 150px;
        .van-swipe{
            height: 150px;
        }
    }
    // 轮播图结束

    // 新闻列表开始
    .nihao{
        .my-row{
            padding: 10px;
            width: 100%;
            height: 85px;
            border-bottom: 1px solid #999;
            box-sizing: border-box;
        }
        .van-col{
            height: 100%;
        }
        .info-right{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h3{
                font-weight: 700;
                font-size: 14px;
                line-height: 20px;
            }
            .info{
                font-size: 10px;
                color: #999;
                span:nth-child(2){
                    margin-left: 10px;
                }
            }
        }
    }
    // 新闻列表结束
}
</style>